<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Blog</title>
    <style>
      /* 样式装饰可以根据您的需要进行更改 */
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
      }
      h1 {
        font-size: 28px;
      }
      h2 {
        font-size: 24px;
      }
      h3 {
        font-size: 20px;
      }
      p {
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>My Blog</h1>
    <ul id="blog-list"></ul>

    <script>
      // 获取NGNe仓库的Issues接口
      const issuesApiUrl = 'https://gitee.com/api/v5/repos/siger99/NGNe/issues';

      // 使用Fetch函数获取Issues数据
      fetch(issuesApiUrl)
        .then(response => response.json())
        .then(data => {
          // 过滤出标签有“blog”且状态为“已关闭”的Issue
          const blogIssues = data.filter(issue => issue.state === "closed" && issue.labels.some(label => label.name === "blog"));
          const promises = [];

          // 遍历所有符合条件的Issue，并将它们添加到页面中
          blogIssues.forEach(issue => {
            const { title, created_at, number } = issue;
            const date = new Date(created_at).toLocaleDateString('en-US');

            // 生成HTML元素并添加到页面中
            const blogEntry = `
              <li>
                <h2>${title}</h2>
                <p>${date}</p>
                <div id="blog-${number}"></div>
              </li>
            `;

            document.getElementById('blog-list').innerHTML += blogEntry;

            // 获取单个Issue的内容
            const issueContentApiUrl = `https://gitee.com/api/v5/repos/siger99/NGNe/issues/${number}`;

            promises.push(
              fetch(issueContentApiUrl)
                .then(response => response.json())
                .then(issueData => {
                  const content = sanitizeMarkdown(issueData.body); // 清理和转换Markdown

                  // 添加内容到页面中
                  const blogContainer = document.getElementById(`blog-${number}`);
                  if (blogContainer) {
                    blogContainer.innerHTML = content;
                  }
                })
                .catch(error => console.log(`Error fetching content of issue ${number}:`, error))
            );
          });

          // 等待所有的请求完成
          Promise.all(promises)
            .then(() => console.log('All content fetched successfully.'))
            .catch(error => console.log('Error fetching content:', error));
        })
        .catch(error => console.log('Error fetching issues:', error));

      // 清理和转换Markdown函数（简单示例）
      function sanitizeMarkdown(markdown) {
        // 您可以使用更高级的Markdown转HTML库，如marked.js或showdown等。
        // 这里只是一个简单的示例，使用正则表达式进行转换。
        let html = markdown
          .replace(/#/g, '<h3>') // 将Markdown的标题“#”替换为HTML的<h3>标签
          .replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>'); // 将Markdown的粗体文本(**text**)替换为HTML的<strong>标签

        return html;
      }
    </script>
  </body>
</html>